<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/vue.js"></script>
    <style>
        .img{
            width:300px;
            height:300px;
        }
        .static{
            width:200px;
            height:200px;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
            color:blue;
        }
        .a{
            background: fuchsia;
        }
        .b{
            border-radius: 50%;
        }
        .c{
            border:5px solid yellowgreen;
        }
        .img{
            width:110px;
            height:60px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 :data-title="title" v-red  >{{ title }}</h2>
        <p> 
            <input type="text" v-focus >
        </p>
        <div>
            <h2   v-demo:click.stop.once.lazy="flag"  > Demo - demo - Demo </h2>
        </div>
        <h2 v-color="color"  v-my-show="toggle"   >新年新气象  - up - yyds </h2>
        <button @click="toggle=!toggle" >点击切换</button>
        <div v-my-html="html" >
            
        </div>
        <h2  v-myon:click="countAdd" >count == {{count }}</h2>
        <h2 v-my-text="title"   v-mybind:data-message = 'title'  ></h2>
    </div>
    <script>

        Vue.directive("focus",{
            inserted(el,bindings){
                // el 需要操作的DOM 
                // bindings 参数
                el.focus()
            }
        })

        Vue.directive('demo',{
            bind(el){
                console.log('bind')
            },
            inserted(el,binding){
                console.log(el)
                el.style.color = 'green'
                console.log(binding)
                var s = JSON.stringify
                el.innerHTML =
                    '指令名name: '       + s(binding.name) + '<br>' +
                    '值 value: '      + s(binding.value) + '<br>' +
                    '表达式 expression: ' + s(binding.expression) + '<br>' +
                    '参数 argument: '   + s(binding.arg) + '<br>' +
                    '修饰符 modifiers: '  + s(binding.modifiers) + '<br>' 
            },
            update(el) {
                
            },
            unbind(el){

            }
        })

        Vue.directive("color",{
            inserted(el,binding){
                // el.style.color = "red"
                el.style.color =  binding.value;
            }
        })
        // v-show v-my-show 
        Vue.directive("myShow",{
            inserted(el,binding){  // 初始化载入
                el.style.display = binding.value ? 'block':'none'
            },
            update(el,binding){  // 绑定的数据更新 
                el.style.display = binding.value ? 'block':'none'
            }
        })
        // v-html 
        Vue.directive("myHtml",{
            inserted(el,binding){
                el.innerHTML = binding.value;
            }
        })
        // v-text 
        Vue.directive("myText",{
            inserted(el,binding){
                el.textContent  = binding.value;
            }
        })
        // v-on 
        Vue.directive("myon",{
            inserted(el,binding){
                el.addEventListener(binding.arg,binding.value,binding.modifiers.stop )
            }
        })

        Vue.directive("mybind",{
            inserted(el,binding){
                el.setAttribute(binding.arg,binding.value)
            }
        })
        
        // v-bind 
        // v-if 
        // v-for
        // v-model 
        const vm = new Vue({
            // el:"#app"
            data:{  // 简单数据
                title:'Vue 自定义指令  ',
                flag:true,
                color:'orange',
                toggle:true, 
                html:"<h2>WH2309 - YYDS - 天道酬勤 </h2>",
                count:2000 
            },
            directives:{
                red:{
                    inserted(el){
                        el.style.color = 'red'
                    }
                }
            },
            methods:{
                countAdd(){
                    this.count++;
                }
            },
            mounted(){
                // 真实DOM
                document.getElementsByTagName('title')[0].innerHTML = this.title;
            },
        }).$mount("#app")    
       
    </script>
      <!-- 
            Vue 也允许注册自定义指令   操作底层DOM  
            代码复用和抽象的主要形式是组件 (component 讲到这里再说) 

            v-on   v-if   v-show    v-for   v-model  v-bind v-else v-once v-text v-html  

            指令目的   作用    操作底层DOM  

            指令 directive  
            v- 开头     驼峰命名 (单词之间  大写字母  变为小写字母 前面加 -  )  newColor   (W3C HTML 不准出现大写字母 )   

            全局定义  Vue.directive(name,{钩子函数})   Vue.filter
            局部定义  directives      filters 

            指令钩子函数   一个指令定义对象可以提供钩子函数 (操作指令的钩子函数 )
            bind   指令第一次绑定到 元素时候调用     进行一些初始化操作   1 
            inserted  插入   被绑定元素插入父节点时调用  1
            update    更新  数据或者DOM节点 更新    n 
            unbind   只调用一次，指令与元素解绑时调用   1


            钩子函数 有几个参数 (el binding )
            el 绑定的DOM
            binding  指令携带的变量数据


            name 指令名
            value 指令的值  最重要  binding.value (函数)
            expression  指令对应的表达式 变量名称
            argument   指令的参数     v-on:click  click args   冒号声明的  
            modifiers   指令的修饰符   v-on.stop:click  stop 修饰符   
            (v-show v-on  v-html)
     -->

</body>
</html>